<template>
  <el-card>
    <el-form :model="article">
      <el-form-item label-width="50px" label="标题" prop="title">
        <el-input
          class="border-bottom"
          placeholder="请输入一个让人难以忘记的标题"
          v-model="article.title"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="50px" label="标签" prop="title">
        <el-select
          style="width: 100%"
          class="border-bottom"
          v-model="article.tags"
          multiple
          filterable
          allow-create
          remote
          reserve-keyword
          :remote-method="remoteTagMethod"
          default-first-option
          placeholder="请选择文章标签"
        >
          <el-option
            v-for="(item, index) in tagsSelect"
            :key="index"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <mavon-editor
          v-model="article.content"
          ref="editor"
          @imgAdd="addImage"
          @change="editorChange"
        ></mavon-editor>
      </el-form-item>
      <el-form-item label="上传封面">
        <el-upload
          class="avatar-uploader uploader__mini uploader__center"
          action="http://"
          :show-file-list="false"
        >
          <!--<img v-if="imageUrl" :src="imageUrl" class="avatar">-->
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label-width="50px" label="摘要" prop="title">
        <el-input
          class="border-bottom"
          placeholder="默认截取前50个字符"
          v-model="article.outline"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="text-right">
      <el-button type="primary" @click="saveOrUpdate">发布文章</el-button>
    </div>
  </el-card>
</template>

<script>
import "mavon-editor/dist/css/index.css";

export default {
  name: "edit",
  data() {
    return {
      tags: [],
      article: {
        title: "",
        content: "",
        state: "not_publish",
        tags: [],
        uid: 1,
        cover: "",
        outline: ""
      },
      htmlValue: "",
      tagsSelect: [],
      state: []
    };
  },
  methods: {
    /**
     * 远程搜索文章标签
     */
    async remoteTagMethod(queryWorld) {
      if (queryWorld) {
        if (!this.tags.length) {
          // 只要tags是空的，就需要从后台拿数据
        }
        this.tagsSelect = this.tags.filter(
          item => item.indexOf(queryWorld) > -1
        );
      } else {
        this.tagsSelect = [];
      }
    },
    /**
     * 添加图片
     * @param index 图片索引
     * @param file 文件对象
     */
    addImage(index, file) {
      // 第一步.将图片上传到服务器.
      const formData = new FormData();
      const editor = this.$refs["editor"];
      formData.append("file", file);
      this.$api
        .request({
          path: "file/upload",
          data: formData
        })
        .then(({ data: { url } }) => {
          editor.$img2Url(index, url);
          this.clearImgInput();
        });
    },
    clearImgInput() {
      const pictureDom = document.querySelector(
        ".markdown-body .fa-mavon-picture-o input"
      );
      pictureDom.value = null;
    },
    /**
     * 保存文章
     */
    saveOrUpdate() {
      const req = JSON.parse(JSON.stringify(this.article));
      req["update_time"] = this.$date.format(new Date());
      this.$api
        .request({
          path: "admin/article/save",
          data: req
        })
        .then(() => {
          this.$message.success("操作成功");
          this.$router.push({ name: "adminArticleIndex" });
        });
    },
    getDetail(id) {
      this.$api
        .request({
          path: "admin/article/query",
          data: { id }
        })
        .then(({ data }) => {
          this.article = data;
        });
    },
    editorChange(val, html) {
      this.htmlValue = html;
    }
  },
  created() {
    const { id } = this.$route.params;
    id && this.getDetail(id);
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input.border-bottom .el-input__inner {
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0;
}
</style>
